﻿@model List<List<thailandProject.Models.PropertyMatch>>

@{
    ViewBag.Title = "Properties";
}

<div id="Wrapper2">
    <div id="content_header">
        <div id="headerimage">
        </div>
        <div id="theheader">@ViewBag.Header</div>
    </div>
    <!-- Left Column begins here -->
    <aside id="sidebar-wrapper">
        <nav class="sidebar">
            <h1>View Available Properties</h1>
            <!-- CONTENT GOES HERE -->
           @using (Html.BeginForm("Index", "Property", FormMethod.Post, new { id = "searchForm" }))
           {
               <div id="searchDates" style="width:100%; margin-top:10px;">
                     <div class="search_box1"> From: <br /><input style="width:85%" type="text" class="datepickerTo" id="dateFrom" name="dateFrom" value="@Session["dateFrom"]" readonly="true" /></div>
                     <div class="search_box2"> To: <br /><input style="width:85%" type="text" class="datepickerFrom" id="dateTo" name="dateTo" value="@Session["dateTo"]" readonly="true" /></div>
                     <div class="search_button"><input id="searchButton" style="float:left;" type="image" alt="search" src="../../images/searchicon.png" /></div>
                     <div id="dateErrorMessage" style="color:red; visibility:hidden;">Please enter a "To" and "From" date.</div>
               </div>
           }
           
           <div id="availableProperties">
               @using (Html.BeginForm("SelectClient", "Property", FormMethod.Post, new { id = "priceForm" }))
               {

                    <h1>Exact Matches:</h1>
                   if (Model != null)
                   {
                       if (Model[0].Count > 0)
                       {
                            <div>Found @Model[0].Count properties</div>
                           foreach (var prop in Model[0])
                           {
                               string propertyId = prop.property.propID + "c";
                               string quotedPrice = "quotedPrice" + prop.property.propID;
                               string onHold = propertyId + "Hold";
                                <div style="clear:both" >
                                <div class="property_item_row">
                                    <div style="float:left; margin:10px 0px 0px 0px; width:30%;">
                                        <div style="float:left;">
                                            <img src="../../images/unchecked.png" id="@propertyId" class="this_check_box" alt="checkbox" />
                                            <input type="hidden" name="cbProperty" value="@propertyId" />
                                        </div>
                                        <div class="property_title">
                                            @Html.DisplayFor(modelItem => prop.property.propName)
                                        </div>
                                    </div>
                                    <div style="float:left; width:70%;">
                                        <span class="lblQuotedPrice">&#3647 </span>
                                        <div><input type="text" name="@quotedPrice" value="0" size="1" class="this_quoted_price" maxlength="10" />
                                            <span style="color:red; visibility:hidden;">Invalid price.</span>
                                        </div>
                                        @if (prop.isOnHold)
                                        {
                                            <span style="color:black;"><strong>Inquired</strong></span>
                                            <input type="hidden" name="@onHold" value="true" />
                                        }
                                    </div>
                                    <br />
                                </div>
                                </div>
                                
                           }
                       }
                       else
                       {
                            <p class="lblNoProperties">No available properties found.</p>
                       }
                   }
                    <br /><br />
                    <h1>Partial Matches:</h1>
                   if (Model != null)
                   {
                       int counter = 0;
                       int repeatCounter = 0;
                       int prevPropId = -1;
                       if (Model[1].Count > 0)
                       {
                            <div>Found @Model[1].Count potential matches</div>
                           foreach (var prop in Model[1])
                           {
                               counter += 2;
                               repeatCounter = (prevPropId == prop.property.propID ? repeatCounter + 1 : 0);
                               string datepicker1 = "datepicker" + (counter - 2);
                               string datepicker2 = "datepicker" + (counter - 1);
                               string datepicker1class = ".datepicker" + (counter - 2);
                               string datepicker2class = ".datepicker" + (counter - 1);
                               string pick_date1 = "pick_date" + (counter - 2);
                               string pick_date2 = "pick_date" + (counter - 1);
                               string pDateFrom = "pDateFrom" + prop.property.propID + "_" + repeatCounter;
                               string pDateTo = "pDateTo" + prop.property.propID + "_" + repeatCounter;
                               string propertyId = prop.property.propID + "p" + "_" + repeatCounter;
                               string onHold = propertyId + "Hold";
                               string quotedPrice = "quotedPrice" + prop.property.propID + "_" + repeatCounter;
                               prevPropId = prop.property.propID;
                                
                                <div class="property_item_row">
                                    <div style="float:left; width:30%; margin:10px 0px 0px 0px">
                                        <div style="float:left;">
                                            <img src="../../images/unchecked.png" id="@propertyId" class="this_check_box" alt="checkbox" />
                                            <input type="hidden" name="cbProperty" value="@propertyId" />
                                        </div>
                                        <div class="property_title">
                                            @Html.DisplayFor(modelItem => prop.property.propName)
                                        </div>
                                    </div>
                                    <div style="float:left; width:70%">
                                        <div class="w60 floatleft">
                                            <div class="lblQuotedPrice w10">
                                                &#3647
                                            </div>
                                            <div class="w90 floatleft">
                                                <input id="quote_price" type="text" name="@quotedPrice" value="0"  class="this_quoted_price" maxlength="10" />
                                                <span style="color:red; visibility:hidden;">Invalid price.</span>
                                                @if (prop.isOnHold)
                                                {
                                                    <span style="color:black;"><strong>Inquired</strong></span>
                                                    <input type="hidden" name="@onHold" value="true" />
                                                }
                                            </div>
                                        </div>
                                        <div class="w40 floatleft">
                                            <div id="partialMatchDate1" class="floatleft" ><input id="@pick_date1" type="text" class="@datepicker1 newdate" name="@pDateFrom" value="@prop.startDate.ToShortDateString()" readonly="true" style="font-size:smaller;padding:2px;margin:2px 0px 0px 0px;border:none;background:none;width:100%;" /></div>
                                        <script type = "text/javascript">
                                            $(function () {
                                                $(("@datepicker1class")).datepicker({minDate: @prop.startDaysFromNow, maxDate: @prop.endDaysFromNow, showButtonPanel:true});
                                            });
                                        </script>

                                        <div id="partialMatchDate2" class="floatleft" ><input id="@pick_date2" type="text" class="@datepicker2 newdate" name="@pDateTo" value="@prop.endDate.ToShortDateString()" readonly="true" style="font-size:smaller;padding:2px;margin:2px 0px 0px 0px;border:none;background:none;width:100%;" /></div>
                                        <script type = "text/javascript">
                                            $(function () {
                                                $("@datepicker2class").datepicker({minDate: @prop.startDaysFromNow, maxDate: @prop.endDaysFromNow, showButtonPanel:true});
                                            });
                                        </script>
                                        </div>
                                    </div>
                                    
                                    
                                    
                                    
                                    <br />
                                </div>
                                
                           }
                       }
                       else
                       {
                            <p class="lblNoProperties">No available properties found.</p>
                       }
                   }
                    <br />
                   <br />
                   if (Model != null)
                   {
                       if (Model[0].Count > 0 || Model[1].Count > 0)
                       {
                    <div id = "sumbitButtons">
                        <div class="emailsubmitbutton">
                            <div id="priceErrorMessage" style="color:red; visibility:hidden;">Please fix errors to continue.</div>
                            @if((int)Session["userPerm"] <= 2)
                            {
                                <input style="float:left;" name="btnSubmit" type="image" alt="search" src="../../images/emailicon.png" value="email" />
                            }
                        </div>
                        
                    </div>
                       }
                   }
               }
           </div>
        </nav>
        <!-- Left column ends here -->
    </aside>
    <!-- Right column begins here -->
    <article id="contents">
        Select a "To" and "From" range to search for available properties.
        <br /><br />
        <strong>Complete matches</strong> show a property that is available for the entire range of the queried dates.
        <br /><br />
        <strong>Partial matches</strong> show when a property is partially available throughout the queried dates. Mix and match these to make a full reservation.
        <br /><br />
        <strong>Inquired</strong> denotes that another client has expressed interest in this property, but has not committed.
    </article>
    <!-- Right column ends here -->
</div>
<!-- Div wrapper2 ends here -->


<script type = "text/javascript">
    $(function () {
        $(".datepicker").datepicker({changeMonth:true, changeYear:true});
    });

    $("document").ready(function () {
        $().ready(function () {
            var checkboxes = $('.this_check_box');

            for (var i = 0; i < checkboxes.length; i++) {
                if ($(checkboxes[i]).next().attr('value').indexOf("_use") != -1) {
                    $(checkboxes[i]).attr('src', '../../images/checked.png');
                }
            } /*This needs to run when the user hits "back" on the Email/Compose page and this page is reloaded*/
        })

        $(".this_check_box").click(function () {

            //alert(this_id);
            if ($(this).attr('src') == '../../images/unchecked.png') {
                $(this).attr('src', '../../images/checked.png');
                $(this).next().attr('value', $(this).next().attr('value') + "_use");
            }
            else {
                $(this).attr('src', '../../images/unchecked.png');
                $(this).next().attr('value', $(this).next().attr('value').replace('_use', ''));
            }
        })


        $(":input[data-autocomplete]").each(function () {
            $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
        });

        $(".this_quoted_price").keyup(function () {

            var checkboxID = $(this).attr('name');
            checkboxID = checkboxID.substr("quotedPrice".length, checkboxID.length - "quotedPrice".length);

            if ($("#" + checkboxID + "c").length) //The complete version exists
            {
                if ($(this).val() != "" && $(this).val() != "0") {
                    $("#" + checkboxID + "c").attr('src', '../../images/checked.png');
                    $("#" + checkboxID + "c").next().attr('value', $("#" + checkboxID + "c").next().attr('value') + "_use");
                }
                else {
                    $("#" + checkboxID + "c").attr('src', '../../images/unchecked.png');
                    $("#" + checkboxID + "c").next().attr('value', $("#" + checkboxID + "c").next().attr('value').replace('_use', ''));
                }

            }
            else {
                var value = checkboxID.substr(0, checkboxID.indexOf("_"));
                var repeatIndex = checkboxID.substr(checkboxID.indexOf("_"), checkboxID.length - value.length);

                if ($(this).val() != "" && $(this).val() != "0") {
                    $("#" + value + "p" + repeatIndex).attr('src', '../../images/checked.png');
                    $("#" + value + "p" + repeatIndex).next().attr('value', $("#" + value + "p" + repeatIndex).next().attr('value') + "_use");
                }
                else {
                    $("#" + value + "p" + repeatIndex).attr('src', '../../images/unchecked.png');
                    $("#" + value + "p" + repeatIndex).next().attr('value', $("#" + value + "p" + repeatIndex).next().attr('value').replace('_use', ''));
                }
            }

            //Determine if the price is valid
            var price = $(this).val();
            if (isNaN(price) || price == "" || price.indexOf(' ') != -1 || price < 0) {
                $(this).next().attr('style', 'color:red; visibility:visible;');
            }
            else {
                $(this).next().attr('style', 'color:red; visibility:hidden;');
            }
        })

        $(".this_quoted_price").change(function () {
            //If the focus is changed and no value has been entered, change it back to a 0
            var price = $(this).val();

            if (price == "") {
                $(this).val(0);
                $(this).next().attr('style', 'color:red; visibility:hidden;');
            }
        })

        $("#searchForm").submit(function () {
            //Verify that a "To" and "From" date has been entered
            if ($("#dateFrom").val().length > 0 && $("#dateTo").val().length > 0) {
                $("#dateErrorMessage").attr('style', 'color:red; visibility:hidden;');
                return true;
            }
            else {
                $("#dateErrorMessage").attr('style', 'color:red; visibility:visible;');
                return false;
            }
        })

        $("#priceForm").submit(function () {
            //Determine if all entered prices are valid
            var valid = true;
            var hasZero = false;
            var prices = $('.this_quoted_price');
            var boxes = $('.this_check_box');

            for (var i = 0; i < prices.length; i++) {
                var price = $(prices[i]).val();
                if (isNaN(price) || price == "" || price.indexOf(' ') != -1 || price < 0) {
                    valid = false;
                    //Give focus to the effected field
                    $(prices[i]).focus();
                    break;
                }
                if (price == "0" && $(boxes[i]).attr('src') == "../../images/checked.png") {
                    hasZero = true;
                }
            }

            if (valid) {
                $("#priceErrorMessage").attr('style', 'color:red; visibility:hidden;');

                if (hasZero) {
                    if(confirm('One or more properties with a price of 0 Baht has been found.\n\nThis is usually done when the property owner wants to reserve the property. If this was done by accident, cancel and enter in a price.')){
                        return true;
                    }
                    else{
                        return false;
                    }
                }
                else {
                    return true;
                }
            }
            else {
                $("#priceErrorMessage").attr('style', 'color:red; visibility:visible;');
                return false;
            }
        })

    });
</script>